<!-- 字典表 -->
<template>
  <div class="table">
    <el-row :gutter="10">
      <el-col :lg="12">
        <div class="container">
          <div class="crumbs">
            <el-breadcrumb separator="/">
              <el-breadcrumb-item>
                <el-icon>
                  <Search />
                </el-icon> 查询条件：
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <el-row :gutter="10">
            <el-col :xl="8" :lg="12" :md="8" :sm="12" style="margin-bottom:10px">
              <el-select v-model.trim="searchCondition.dictKey" filterable clearable placeholder="字典类型名称" class="">
                <el-option v-for="item in tableState.tableList" :label="item.dictValue" :value="item.dictKey"
                  :key="item.id"></el-option>
              </el-select>
            </el-col>
            <el-col :xl="6" :lg="6" :md="12" :sm="24" style="margin-bottom:10px">
              <el-button type="success" :icon="Search" :disabled="disabledbtn" @click="searchInfo">搜索</el-button>
              <el-button type="warning" :icon="Refresh" :disabled="disabledbtn"
                @click="(e) => resetSearch(customMethods, e)">重置</el-button>
            </el-col>
          </el-row>
          <div class="crumbs">
            <el-breadcrumb separator="/">
              <el-breadcrumb-item> 查询结果：</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <div class="handle-box">
            <el-button type="primary" :icon="Plus" class="mr10" :disabled="disabledbtn" @click="editVisible = true">新增
            </el-button>
            <el-popconfirm placement="top" width="160" title="你确定要删除吗?" @confirm="batchDelete('deleteDictInfo')">
              <template #reference>
                <el-button type="danger" :icon="Delete" class="mr10" :disabled="disabledbtn">批量删除
                </el-button>
              </template>
            </el-popconfirm>
          </div>
          <el-table :data="tableState.tableList.slice((pageNumber - 1) * pageSize, pageNumber * pageSize)" border
            class="table" ref="multipleTableRef" v-loading="tableLoading" :reserve-selection="true"
            @row-click="rowClick" @row-dblclick="rowDblclick">
            <el-table-column type="index" align="center"> </el-table-column>
            <el-table-column type="selection" width="55" align="center"></el-table-column>
            <el-table-column prop="dictKey" label="字典类型" align="center">
            </el-table-column>
            <el-table-column prop="dictValue" label="字典类型名称" align="center">
            </el-table-column>
            <el-table-column label="操作" width="180" align="center">
              <template #default="scope">
                <el-button type="primary" size="small" text :icon="View"
                  @click="handleViewEdit(scope.row, 'view', '查看')">
                  查看
                </el-button>
                <el-button type="primary" size="small" text :icon="Edit"
                  @click="handleViewEdit(scope.row, 'edit', '编辑')">
                  编辑
                </el-button>
                <div class="display-inline-block" v-permission="'delete'">
                  <el-popconfirm placement="top" width="160" title="你确定要删除吗?"
                    @confirm="deleteInfo('deleteDictInfo', [id])">
                    <template #reference>
                      <el-button text :icon="Delete" size="small" class="red" @click="id = scope.row.id">删除
                      </el-button>
                    </template>
                  </el-popconfirm>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination">
            <el-pagination background @update:current-page="handleCurrentChange" @update:page-size="handleSizeChange"
              layout="total, sizes, prev, pager, next, jumper" :page-size="pageSize" :current-page="pageNumber"
              :page-sizes="pageSizes" :total="total" :hide-on-single-page="false">
            </el-pagination>
          </div>
        </div>
      </el-col>
      <el-col :lg="12">
        <div class="container">
          <div class="crumbs">
            <el-breadcrumb separator="/">
              <el-breadcrumb-item><i class="el-icon-lx-cascades"></i> 字典详情</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <div class="handle-box">
            <el-button type="primary" :icon="Plus" class="mr10" :disabled="disabledbtn" @click="editVisible1 = true">新增
            </el-button>
          </div>
          <el-table :data="tableState1.tableList.slice((pageNumber1 - 1) * pageSize1, pageNumber1 * pageSize1)" border
            class="table" ref="multipleTableRef1" v-loading="tableLoading1" :reserve-selection="true"
            @row-dblclick="rowDblclick1">
            <el-table-column type="index" align="center"> </el-table-column>
            <el-table-column type="selection" width="55" align="center"></el-table-column>
            <el-table-column prop="dictKey" label="字典类型" align="center">
            </el-table-column>
            <el-table-column prop="dictValue" label="字典值" align="center">
            </el-table-column>
            <el-table-column prop="dictLabel" label="字典标签" align="center">
            </el-table-column>
            <el-table-column prop="dictSort" label="排序" align="center">
              <template #default="scope">
                <div class="">
                  <el-input v-model.trim.number="scope.row.dictSort" placeholder="请输入内容"
                    @change="handleSort(scope.row)"></el-input>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="180" align="center">
              <template #default="scope">
                <el-button type="primary" size="small" text :icon="View"
                  @click="handleViewEdit1(scope.row, 'view', '查看')">
                  查看
                </el-button>
                <el-button type="primary" size="small" text :icon="Edit"
                  @click="handleViewEdit1(scope.row, 'edit', '编辑')">
                  编辑
                </el-button>
                <div class="display-inline-block" v-permission="'delete'">
                  <el-popconfirm placement="top" width="160" title="你确定要删除吗?"
                    @confirm="deleteInfo1('deleteDictLabelInfo', [id])">
                    <template #reference>
                      <el-button text :icon="Delete" size="small" class="red" @click="id = scope.row.id">删除
                      </el-button>
                    </template>
                  </el-popconfirm>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination">
            <el-pagination background @update:current-page="handleSizeChange1" @update:page-size="handleCurrentChange1"
              layout="total, sizes, prev, pager, next, jumper" :page-size="pageSize1" :current-page="pageNumber1"
              :page-sizes="pageSizes1" :total="total1" :hide-on-single-page="false">
            </el-pagination>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 新增编辑查看弹出框(字典类型) -->
    <el-dialog :title="dialogTitle" v-model="editVisible" width="40%" draggable
      :close-on-click-modal="closeOnClickModal" @closed="closedFormDialog">
      <el-form ref="dictTypeFormRef" :model="dictTypeForm" :rules="rules" v-loading="formLoading" label-width="150px">
        <el-row :gutter="10">
          <el-col :span="19">
            <el-form-item label="字典类型：" prop="dictKey">
              <el-input v-model.trim="dictTypeForm.dictKey" placeholder="字典类型"
                :disabled="propTypeCodeDisabled"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="19">
            <el-form-item label="字典类型名称：" prop="dictValue">
              <el-input v-model.trim="dictTypeForm.dictValue" placeholder="字典类型名称"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-row :gutter="10">
          <el-col :span="19">
            <el-form-item label="是否可用："
                          prop="status">
              <el-switch style="display: block"
                         v-model.trim="booleanEnabled"
                         active-color="#13ce66"
                         inactive-color="#409eff"
                         active-text="可用"
                         inactive-text="不可用"
                         @change="changeEnabled">
              </el-switch>
            </el-form-item>
          </el-col>
        </el-row> -->
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editVisible = false">取 消</el-button>
          <el-button type="primary" :disabled="disabledbtn" v-if="!isDisabledbtn"
            @click="submitForm('commonDictTypeInfo', getTableInfo)">确
            定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 新增编辑查看弹出框(字典数据) -->
    <el-dialog :title="dialogTitle1" v-model="editVisible1" width="40%" draggable
      :close-on-click-modal="closeOnClickModal" @closed="closedFormDialog1">
      <el-form ref="dictDataFormRef" :model="dictDataForm" :rules="rules1" v-loading="formLoading1" label-width="150px">
        <el-row :gutter="10">
          <el-col :span="19">
            <el-form-item label="字典值：" prop="dictValue">
              <el-input v-model.trim="dictDataForm.dictValue" placeholder="字典值"
                :disabled="propTypeCodeDisabled"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="19">
            <el-form-item label="字典标签：" prop="dictLabel">
              <el-input v-model.trim="dictDataForm.dictLabel" placeholder="字典标签"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="10">
          <el-col :span="19">
            <el-form-item label="排序：" prop="dictSort">
              <el-input v-model.trim="dictDataForm.dictSort" type="number" placeholder="排序"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-row :gutter="10">
          <el-col :span="19">
            <el-form-item label="是否可用："
                          prop="status">
              <el-switch style="display: block"
                         v-model.trim="booleanEnabled"
                         active-color="#13ce66"
                         inactive-color="#409eff"
                         active-text="可用"
                         inactive-text="不可用"
                         @change="changeEnabled1">
              </el-switch>
            </el-form-item>
          </el-col>
        </el-row> -->
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editVisible1 = false">取 消</el-button>
          <el-button type="primary" :disabled="disabledbtn" v-if="!isDisabledbtn1"
            @click="submitForm1('commonDictDataInfo', getTableInfo1)">确
            定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { reactive, ref, nextTick } from 'vue';
import { ElMessage } from 'element-plus';
import { View, Delete, Edit, Search, Plus, Refresh } from '@element-plus/icons-vue';
import { api as Request, imageUrl, uploadUrl } from '@/utils/api';
import { useTable } from '@/hooks/useTable.js';
import { useDialogForm } from '@/hooks/useDialogForm.js';
import { useSort } from '@/hooks/useSort.js';
import { useUpload } from '@/hooks/useUpload.js';
import useRules from '@/hooks/useRules.js';
const disabledbtn = ref(false);/* 按钮可用与不可用 */
const formLoading = ref(false);/* 表单loading状态 */
const formLoading1 = ref(true);/* 表单loading状态 */
let { total, pageNumber, pageSize, pageSizes, multipleTableRef, tableLoading, tableState, searchCondition,
  handleCurrentChange, handleSizeChange, getTableInfo, searchInfo, resetSearch, batchDelete, deleteInfo, rowDblclick } =
  useTable({
    dictKey: '',
    dictValue: ''
  }, 'getDictTypeInfo', disabledbtn, 'FRONT_END');
let { formRef: dictTypeFormRef, formData: dictTypeForm, methodType, isDisabledbtn,
  closeOnClickModal, dialogTitle, editVisible, closedFormDialog, submitForm } = useDialogForm({
    id: '',
    dictKey: '',
    dictValue: ''
  }, disabledbtn, handleCustomOperation, formLoading);

let { total: total1, pageNumber: pageNumber1, pageSize: pageSize1, pageSizes: pageSizes1, multipleTableRef: multipleTableRef1,
  tableLoading: tableLoading1, tableState: tableState1, searchCondition: searchCondition1,
  handleCurrentChange: handleCurrentChange1, handleSizeChange: handleSizeChange1, getTableInfo: getTableInfo1,
  searchInfo: searchInfo1, resetSearch: resetSearch1,
  batchDelete: batchDelete1, deleteInfo: deleteInfo1, rowDblclick: rowDblclick1 } =
  useTable({
    dictKey: ''
  }, 'getDictDataInfo', disabledbtn, 'FRONT_END');
let { formRef: dictDataFormRef, formData: dictDataForm, methodType: methodType1, isDisabledbtn: isDisabledbtn1,
  closeOnClickModal: closeOnClickModal1, dialogTitle: dialogTitle1, editVisible: editVisible1, closedFormDialog: closedFormDialog1, submitForm: submitForm1 } = useDialogForm({
    id: '',
    dictKey: '',
    dictSort: 0,
    dictLabel: '',
    dictValue: ''
  }, disabledbtn, handleCustomOperation1, formLoading1);

const propTypeCodeDisabled = ref(false);

// let { handleSort } = useSort('putDictLabelSortInfo', searchInfo1);
const rules = useRules('dictTypeRules');/* 校验规则 */
const rules1 = useRules('dictDataRules');/* 校验规则 */
const id = ref(-1);/* 删除时所需的编号 删除时的id */
/*关闭模态框以后的自定义操作 */
function handleCustomOperation () {
  dictTypeForm.id = '';/* 这个还需要手动清除 */
  propTypeCodeDisabled.value = false;
}
/*关闭模态框以后的自定义操作 */
function handleCustomOperation1 () {
  dictDataForm.id = '';/* 这个还需要手动清除 */
  propTypeCodeDisabled.value = false;
}
/* 单击字典类型当前行 */
const rowClick = (row) => {
  if (row.dictKey !== dictDataForm.dictKey) {
    searchCondition1.dictKey = row.dictKey;
    dictDataForm.dictKey = row.dictKey;
    disabledbtn.value = false;

    searchInfo1();
  }
}
/* 处理排序 */
const handleSort = ({ id, dictSort }) => {
  if (typeof dictSort !== 'number') {
    ElMessage.warning('请输入数字');
    return;
  }
  Request.putDictLabelSortInfo({ id, sort: dictSort })
    .then((res) => {
      ElMessage.success('修改成功');
      searchInfo1();
    })
    .catch((res) => { });
}
/* 点击编辑按钮（字典类型） */
const handleViewEdit = (row, code, name) => {
  dialogTitle.value = name;
  if ('view' === code) {
    isDisabledbtn.value = true;
    closeOnClickModal.value = true;
  } else if ('edit' === code) {
    methodType.value = 'PUT';
  }
  nextTick(() => {
    dictTypeForm.id = row.id;
    dictTypeForm.dictKey = row.dictKey;
    dictTypeForm.dictValue = row.dictValue;
  })
  propTypeCodeDisabled.value = true;
  editVisible.value = true;
}
/* 点击编辑按钮（字典值） */
const handleViewEdit1 = (row, code, name) => {
  dialogTitle1.value = name;
  if ('view' === code) {
    isDisabledbtn1.value = true;
    closeOnClickModal1.value = true;
  } else if ('edit' === code) {
    methodType1.value = 'PUT';
  }
  nextTick(() => {
    dictDataForm.id = row.id;
    dictDataForm.dictKey = row.dictKey;
    dictDataForm.dictLabel = row.dictLabel;
    dictDataForm.dictValue = row.dictValue;
    dictDataForm.dictSort = row.dictSort;
  })
  propTypeCodeDisabled.value = true;
  editVisible1.value = true;
}

/* 重置的回调函数 */
const customMethods = (params) => {
  tableState1.tableList = [];
}

getTableInfo();
tableLoading1.value = false;
formLoading1.value = false;
</script>

<style scoped>
/* layout-布局 */
.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}

.del-dialog-cnt {
  font-size: 16px;
  text-align: center;
}

.table {
  width: 100%;
  font-size: 14px;
}

.red {
  color: #ff0000;
}

.mr10 {
  margin-right: 10px;
}

.textAlignCenter {
  text-align: center;
}

/* 修改select的盒模型 */
.el-select {
  display: block;
}

/* 确定按钮的显示与隐藏 */
.displaybtn {
  display: none;
}

/* 修改该字典值  查询条件，查询结果得样式 */
.el-breadcrumb {
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 10px;
}

/* 提示图标设置 */
.icon-wzg-config {
  height: 30px;
  line-height: 30px;
}

/* 修改Switch开关 */
.el-switch {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
</style>
